<template>
	<view class="container">
		<view class="header">
			<text class="title">{{pageTitle}}</text>
			<text class="subtitle">{{dateLabel}} · {{parentLabel}}</text>
		</view>

		<view class="summary" v-if="summary">
			<text class="summary-title">情绪概览</text>
			<view class="summary-row">
				<text class="emoji">{{summary.emoji}}</text>
				<text class="emotion">{{summary.emotion}}</text>
				<text class="level" :class="summary.levelClass">{{summary.level}}</text>
			</view>
			<text class="desc">{{summary.description}}</text>
		</view>

		<view class="conv-list">
			<view class="chat-item" :class="{'user-msg': c.chatType === 1, 'agent-msg': c.chatType === 2}" v-for="(c, i) in conversations" :key="i">
				<!-- 智能体消息：头像在左边 -->
				<view v-if="c.chatType === 2" class="chat-avatar">
					<image src="/static/logotuxiang.png" mode="aspectFill" class="avatar-img"></image>
				</view>
				
				<view class="chat-bubble" :class="{'user-bubble': c.chatType === 1, 'agent-bubble': c.chatType === 2}">
					<text class="chat-content">{{c.content}}</text>
					<text class="chat-time">{{c.time}}</text>
				</view>
				
				<!-- 用户消息：头像在右边 -->
				<view v-if="c.chatType === 1" class="chat-avatar">
					<image src="/static/yonghutouxiang.png" mode="aspectFill" class="avatar-img"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import apiService from '../../utils/api.js'

export default {
	data() {
		return {
			parent: 'father',
			date: '',
			pageTitle: '聊天对话分析',
			parentLabel: '',
			dateLabel: '',
			conversations: [],
			summary: null,
		}
	},
	onLoad(query) {
		this.parent = query.parent || 'father'
		this.date = query.date || new Date().toISOString().split('T')[0]
		this.parentLabel = this.parent === 'father' ? '父亲' : '母亲'
		this.dateLabel = this.formatDate(this.date)
		this.loadData()
	},
	methods: {
		// 生成模拟数据
		getMockData() {
			const mockConversations = [
				{
					time: '09:30',
					content: '今天天气真好，记得多出去走走',
					chatType: 1,
					emoji: '😊',
					emotion: '开心',
					description: '积极愉悦'
				},
				{
					time: '09:31',
					content: '好的，知道了',
					chatType: 2
				},
				{
					time: '12:15',
					content: '中午吃的什么？不要太油腻了',
					chatType: 1,
					emoji: '😟',
					emotion: '关心',
					description: '关心家人'
				},
				{
					time: '12:16',
					content: '吃了清淡的饭菜',
					chatType: 2
				},
				{
					time: '18:45',
					content: '晚上早点休息，别熬夜了',
					chatType: 1,
					emoji: '😴',
					emotion: '疲惫',
					description: '身心疲惫'
				}
			];
			
			const mockSummary = {
				emotion: '平静',
				emoji: '😐',
				level: '一般',
				color: '#FF9800',
				levelClass: 'normal',
				description: '整体情绪平静，一般'
			};
			
			return {
				conversations: mockConversations,
				summary: mockSummary
			};
		},
		
		async loadData() {
			try {
				// 检查apiService是否可用
				if (!apiService) {
					console.warn('apiService不可用，使用模拟数据');
					const mockData = this.getMockData();
					this.conversations = mockData.conversations;
					this.summary = mockData.summary;
					return;
				}
				
				// 获取对话记录 - 支持后端API调用
				const response = await apiService.getParentConversations(this.parent, this.date);
				const conversations = response?.conversations || [];
				
				// 过滤出用户的对话（chatType === 1）
				const userConversations = conversations.filter(c => c.chatType === 1);
				
				// 对用户对话进行整体情绪分析
				const analysis = await apiService.analyzeEmotion(userConversations);
				
				// 保存所有对话（用于显示）
				this.conversations = conversations;
				
				// 设置整体情绪（只显示用户情绪）
				const overall = analysis?.overall || {
					emotion: '平静',
					emoji: '😐',
					level: '一般',
					color: '#FF9800',
					description: '整体情绪平静'
				};
				
				this.summary = {
					...overall,
					levelClass: overall.level === '良好' ? 'good' : overall.level === '一般' ? 'normal' : 'low'
				};
			} catch (error) {
				console.error('加载对话分析数据失败:', error);
				// 出错时使用模拟数据
				const mockData = this.getMockData();
				this.conversations = mockData.conversations;
				this.summary = mockData.summary;
			}
		},
		formatDate(dateStr) {
			const d = new Date(dateStr)
			const today = new Date()
			const yest = new Date()
			yest.setDate(today.getDate()-1)
			const s = d.toISOString().split('T')[0]
			if (s === today.toISOString().split('T')[0]) return '今天'
			if (s === yest.toISOString().split('T')[0]) return '昨天'
			return `${d.getMonth()+1}月${d.getDate()}日`
		}
	}
}
</script>

<style>
.container { padding: 24rpx; background: #f7f8fa; min-height: 100vh; }
.header { margin: 20rpx 10rpx 30rpx; }
.title { display:block; font-size: 40rpx; font-weight: 700; color:#333; }
.subtitle { color:#666; font-size: 26rpx; }

.summary { background:#fff; border-radius: 16rpx; padding: 24rpx; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06); margin-bottom: 20rpx; }
.summary-title { font-weight: 700; color:#3d5a80; margin-bottom: 12rpx; display:block; }
.summary-row { display:flex; align-items:center; gap: 16rpx; margin-bottom: 8rpx; }
.emoji { font-size: 40rpx; }
.emotion { font-size: 28rpx; color:#333; }
.level { padding: 6rpx 14rpx; border-radius: 20rpx; font-size: 22rpx; }
.level.good { background:#e8f5e8; color:#4CAF50; }
.level.normal { background:#fff3e0; color:#FF9800; }
.level.low { background:#ffebee; color:#F44336; }
.desc { color:#666; font-size: 24rpx; line-height: 1.5; }

.conv-list { background:#fff; border-radius: 16rpx; padding: 20rpx; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06); min-height: 400rpx; }
.chat-item { display: flex; margin-bottom: 24rpx; align-items: flex-end; }
.chat-item:last-child { margin-bottom: 0; }

/* 头像样式 */
.chat-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}
.avatar-img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

/* 智能体消息（左侧） */
.chat-item.agent-msg { justify-content: flex-start; }
.chat-item.agent-msg .chat-avatar { margin-right: 12rpx; }
.chat-item.agent-msg .chat-bubble { margin-left: 0; }
.agent-bubble { 
	background: #f0f0f0; 
	color: #333; 
	padding: 20rpx 24rpx; 
	border-radius: 12rpx 12rpx 12rpx 2rpx;
	max-width: calc(70% - 72rpx);
	display: flex;
	flex-direction: column;
}

/* 用户消息（右侧） */
.chat-item.user-msg { justify-content: flex-end; }
.chat-item.user-msg .chat-avatar { margin-left: 12rpx; }
.chat-item.user-msg .chat-bubble { margin-right: 0; }
.user-bubble { 
	background: #f8bfa9; 
	color: #fff; 
	padding: 20rpx 24rpx; 
	border-radius: 12rpx 12rpx 2rpx 12rpx;
	max-width: calc(70% - 72rpx);
	display: flex;
	flex-direction: column;
}

.chat-content { 
	font-size: 28rpx; 
	line-height: 1.5;
	word-break: break-word;
}
.chat-time { 
	font-size: 20rpx; 
	color: #999;
	margin-top: 8rpx;
	align-self: flex-end;
}
.agent-bubble .chat-time { color: #666; }
</style>

